Skip to content

[Feature/#443] 워크스페이스 설정 페이지 UX 개선 - #445

Merged
jjjsun merged 7 commits into
developfrom
feature/#443
Aug 11, 2026
Merged

[Feature/#443] 워크스페이스 설정 페이지 UX 개선#445
jjjsun merged 7 commits into
developfrom
feature/#443

Conversation

@jjjsun

@jjjsun jjjsun commented Aug 10, 2026

Copy link
Copy Markdown
Collaborator

🚨 관련 이슈

Closed #443

✨ 변경사항

  • 🐞 BugFix Something isn't working
  • 💻 CrossBrowsing Browser compatibility
  • 🌏 Deploy Deploy
  • 🎨 Design Markup & styling
  • 📃 Docs Documentation writing and editing (README.md, etc.)
  • ✨ Feature Feature
  • 🔨 Refactor Code refactoring
  • ⚙️ Setting Development environment setup
  • ✅ Test Test related (storybook, jest, etc.)

✏️ 작업 내용

  • 이름/설명/로고 변경 있을때만 저장 가능하도록 hasChanges 추가
  • 저장 버튼 크기 big에서 small로 수정, 문구 수정
  • 워크스페이스 삭제 버튼 크기 big에서 small로 수정
  • 로고/설명 영역 높이 축소

😅 미완성 작업

N/A

📢 논의 사항 및 참고 사항

N/A

💬 리뷰어 가이드 (P-Rules)
P1: 필수 반영 (Critical) - 버그 가능성, 컨벤션 위반. 해결 전 머지 불가.
P2: 적극 권장 (Recommended) - 더 나은 대안 제시. 가급적 반영 권장.
P3: 제안 (Suggestion) - 아이디어 공유. 반영 여부는 드라이버 자율.
P4: 단순 확인/칭찬 (Nit) - 사소한 오타, 칭찬 등 피드백.

Summary by CodeRabbit

  • 개선 사항
    • 드롭다운 메뉴가 화면 공간을 자동으로 계산해 적절한 방향과 위치에 표시됩니다.
    • 타임라인 마지막 항목의 메뉴가 화면 안에서 잘 보이도록 위쪽에 배치됩니다.
    • 설정·워크스페이스 화면이 태블릿과 모바일 환경에 맞게 반응형으로 개선되었습니다.
    • 권한 표의 가로 스크롤과 텍스트 표시가 개선되었습니다.
    • 검색 선택 입력창과 알림 설정 레이아웃이 더 깔끔하게 정리되었습니다.
    • 변경 사항이 없을 때 워크스페이스 설정 저장 요청이 실행되지 않습니다.
    • 소유권 이전 및 삭제 안내 문구와 모달 레이아웃이 개선되었습니다.

@jjjsun
jjjsun requested review from Seojegyeong and YermIm August 10, 2026 09:04
@jjjsun jjjsun self-assigned this Aug 10, 2026
@jjjsun jjjsun added 🎨 Html&css 마크업 & 스타일링 ✨ Feature 기능 개발 labels Aug 10, 2026
@coderabbitai

coderabbitai Bot commented Aug 10, 2026

Copy link
Copy Markdown

Review Change Stack

Warning

Review limit reached

@jjjsun, you've reached your PR review limit, so we couldn't start this review.

Next review available in: 39 minutes

You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository.

How can I continue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews.

How do review limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please refer docs for additional details.

Review details
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: dfa9a4e4-c75c-49c7-bd87-a931d127c331

📥 Commits

Reviewing files that changed from the base of the PR and between 912bb0a and bc034b1.

📒 Files selected for processing (1)
  • src/pages/workspace/WorkspaceSetting.tsx
📝 Walkthrough

Walkthrough

드롭다운이 클리핑 경계와 요소 크기를 기준으로 위치를 재계산합니다. 타임라인 메뉴는 행 위치를 전달합니다. 설정 및 워크스페이스 화면에는 태블릿·모바일 반응형 스타일과 변경 시 저장 조건이 적용됩니다.

Changes

반응형 UI 및 워크스페이스 UX

Layer / File(s) Summary
드롭다운 위치 계산 및 타임라인 연결
src/components/common/dropdownmenu/DropdownMenu.tsx, src/components/timeline/TimelineBar.tsx, src/pages/dashboard/timeline/Timeline.tsx
드롭다운이 클리핑 경계, 메뉴 크기, 트리거 위치를 기준으로 수평·수직 배치를 계산합니다. 리사이즈·스크롤·요소 크기 변경 시 위치를 갱신합니다.
검색 입력 컴포넌트 연결
src/components/common/select/SearchSelect.tsx, src/components/workspace/MemberSearchSelect.tsx
검색 아이콘을 rightElement로 전달합니다. MemberSearchSelect는 사용자 정의 classNameSearchSelect에 전달합니다.
알림 및 설정 카드 반응형 레이아웃
src/components/setting/NotificationSection.tsx, src/components/setting/PasswordSection.tsx, src/components/setting/ProfileSection.tsx, src/components/common/modal/Modal.tsx
알림 행과 Slack·Discord 연동 영역의 태블릿 레이아웃을 조정합니다. 상태 배지를 제거하고 텍스트 축약 및 줄바꿈 스타일을 적용합니다. 설정 카드의 태블릿 패딩과 모달 콘텐츠 여백을 변경합니다.
워크스페이스 설정 저장 조건 및 화면 조정
src/pages/workspace/WorkspaceSetting.tsx, src/components/workspace/TransferOwnerModal.tsx
이름, 설명, 로고 변경이 있을 때만 저장 요청을 실행합니다. 저장 버튼 상태와 문구, 로고·설명 영역 크기, 소유권 양도 및 삭제 안내 스타일을 변경합니다.
워크스페이스 및 타임라인 반응형 레이아웃
src/components/timeline/TimelinePerformancePanel.tsx, src/components/workspace/MemberItem.tsx, src/components/workspace/PermissionTable.tsx, src/pages/workspace/Workspace.tsx
KPI 카드, 멤버 항목, 권한 표, 워크스페이스 생성 화면에 태블릿·모바일 레이아웃과 줄바꿈·가로 스크롤 스타일을 적용합니다.

Estimated code review effort: 3 (Moderate) | ~25 minutes

Possibly related issues

  • WhereYouAd/WhereYouAd-Frontend#444WorkspaceSetting.tsx의 저장 버튼 크기와 문구 변경이 개인 설정 저장 버튼 UX 개선 목표와 연결됩니다.

Possibly related PRs

Suggested reviewers: yermim, seojegyeong

Sequence Diagram(s)

sequenceDiagram
  participant Timeline
  participant TimelineBar
  participant DropdownMenu
  participant ResizeObserver

  Timeline->>TimelineBar: 마지막 행이면 top 전달
  TimelineBar->>DropdownMenu: menuPlacement 전달
  DropdownMenu->>ResizeObserver: 트리거·메뉴 크기 감시
  ResizeObserver-->>DropdownMenu: 위치 갱신
  DropdownMenu-->>TimelineBar: 계산된 메뉴 위치 렌더링
Loading
🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (2 warnings)

Check name Status Explanation Resolution
Out of Scope Changes check ⚠️ Warning Timeline 관련 변경이 워크스페이스 설정 UX 요구사항과 직접 연결되지 않아 PR 범위를 벗어납니다. Timeline 관련 변경과 근거가 없는 공통 컴포넌트 변경을 별도 PR로 분리하거나 [#443]과의 연관 근거를 설명하세요.
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (3 passed)
Check name Status Explanation
Title check ✅ Passed 제목은 #443의 핵심인 워크스페이스 설정 UX 개선을 간결하게 설명하며 변경 범위와 일치합니다.
Description check ✅ Passed 관련 이슈, 변경 유형, 작업 내용, 미완성 작업, 참고 사항을 모두 작성했고 핵심 변경도 설명합니다.
Linked Issues check ✅ Passed 변경 시에만 저장을 허용하고 저장·삭제 버튼 크기와 문구를 수정해 [#443]의 요구사항을 충족합니다.
✨ Finishing Touches 💡 1
📝 Generate docstrings 💡
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch feature/#443

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@github-actions

github-actions Bot commented Aug 10, 2026

Copy link
Copy Markdown

📚 Storybook 배포 완료

항목 링크
📖 Storybook https://69a147b60a56365d9e2185ef-wknqiluebk.chromatic.com/
🔍 Chromatic https://www.chromatic.com/build?appId=69a147b60a56365d9e2185ef&number=627

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2

🧹 Nitpick comments (1)
src/components/workspace/MemberSearchSelect.tsx (1)

60-60: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

SearchSelect에도 twMerge를 사용해 외부 className을 병합해주세요.

MemberSearchSelect가 전달한 classNamerelative w-full 다음에 붙고 있어 호출자가 위치 또는 크기 관련 유틸리티를 전달하면 Tailwind 생성 순서에 따라 클래스 적용 순서가 의도와 달라질 수 있습니다. Input처럼 기본 클래스와 classNametwMerge로 조합하세요.

수정 예시
+import { twMerge } from "tailwind-merge";
+
-      <div ref={containerRef} className={`relative w-full ${className}`}>
+      <div
+        ref={containerRef}
+        className={twMerge("relative w-full", className)}
+      >
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/components/workspace/MemberSearchSelect.tsx` at line 60, Update
SearchSelect’s className handling to merge its default “relative w-full” classes
with the external className through the existing twMerge utility, matching the
pattern used by Input. Ensure the merged result is passed to the rendered
element so caller-provided layout and sizing utilities resolve correctly.

Source: Coding guidelines

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@src/components/timeline/TimelineBar.tsx`:
- Around line 98-103: Update the content container’s conditional padding in the
TimelineBar markup to reserve sufficient right-side space for the absolutely
positioned DropdownMenu when showActions is true. Replace the current pr-3
spacing with at least pr-6, while preserving the existing layout and no-padding
behavior when actions are hidden.

In `@src/pages/workspace/WorkspaceSetting.tsx`:
- Line 158: Update the nameChanged comparison in the workspace settings
change-detection logic to compare name.trim() with detail.name.trim(), matching
the normalization used by the save payload and preventing false change detection
from surrounding whitespace.

---

Nitpick comments:
In `@src/components/workspace/MemberSearchSelect.tsx`:
- Line 60: Update SearchSelect’s className handling to merge its default
“relative w-full” classes with the external className through the existing
twMerge utility, matching the pattern used by Input. Ensure the merged result is
passed to the rendered element so caller-provided layout and sizing utilities
resolve correctly.
🪄 Autofix

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: 9b5439a2-eefb-4903-8c90-ffc81bd16d20

📥 Commits

Reviewing files that changed from the base of the PR and between e676e4f and 912bb0a.

📒 Files selected for processing (15)
  • src/components/common/dropdownmenu/DropdownMenu.tsx
  • src/components/common/modal/Modal.tsx
  • src/components/common/select/SearchSelect.tsx
  • src/components/setting/NotificationSection.tsx
  • src/components/setting/PasswordSection.tsx
  • src/components/setting/ProfileSection.tsx
  • src/components/timeline/TimelineBar.tsx
  • src/components/timeline/TimelinePerformancePanel.tsx
  • src/components/workspace/MemberItem.tsx
  • src/components/workspace/MemberSearchSelect.tsx
  • src/components/workspace/PermissionTable.tsx
  • src/components/workspace/TransferOwnerModal.tsx
  • src/pages/dashboard/timeline/Timeline.tsx
  • src/pages/workspace/Workspace.tsx
  • src/pages/workspace/WorkspaceSetting.tsx
💤 Files with no reviewable changes (1)
  • src/components/common/modal/Modal.tsx

Comment thread src/components/timeline/TimelineBar.tsx
Comment thread src/pages/workspace/WorkspaceSetting.tsx Outdated

@YermIm YermIm left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P4: 확인했습니다!

@jjjsun
jjjsun merged commit 4f25fd8 into develop Aug 11, 2026
3 checks passed
@jjjsun
jjjsun deleted the feature/#443 branch August 11, 2026 18:32
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

✨ Feature 기능 개발 🎨 Html&css 마크업 & 스타일링

Projects

None yet

Development

Successfully merging this pull request may close these issues.

✨ [Feature] 워크스페이스 설정 페이지 UX 개선

3 participants